<template>
  <div class="top-menu">
    <el-menu :default-active="activeIndex"
             mode="horizontal"
             text-color="#333">
      <template v-for="(item,index) in items">
        <el-menu-item :index="item.menuLevel+''"
                      @click.native="openMenu(item)"
                      :key="index">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{generateTitle(item)}}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {buryingPoint} from '@/util/buryingPoint'

import { mapGetters } from 'vuex';
export default {
  name: 'top-menu',
  data() {
    return {
      activeIndex: '1',
      items: [],

      //请求参数
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: {},
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    };
  },
  created() {
    //将顶部菜单序号存入本地缓存
    if(this.$getStore({name: this.userInfo.userId+'activeIndex'})){
      this.activeIndex = this.$getStore({name:this.userInfo.userId+'activeIndex'});
    }
    else{
      this.$setStore({name: this.userInfo.userId+'activeIndex',content:1,type:'session'})
    }
    this.getTopMenu();
  },
  computed: {
    ...mapGetters(['recordChanged','website','tagCurrent', 'menu', 'userInfo'])
  },
  methods: {
    getTopMenu() {
      this.reqParams =  {
        singleBody: this.singleBody,
        currentPage: 1, 
        pageSize: this.website.maxPageSize
      }
      this.commonData = {
        commonArea: reqCommonMsg(this.reqParams),
        recordChanged: this.recordChanged || false
      }
      this.$store.dispatch('GetTopMenu',this.commonData).then(res => { 
        res.forEach(element => {
          this.items.push({
            label: element.menuName,
            path: element.routeAddress,
            icon: element.menuIcon,
            meta: {
              i18n: '',
            },
            menuLevel: element.menuLevel
          })
        });
      });
    },
    generateTitle(item) {
      return this.$router.$avueRouter.generateTitle(
        item.label,
        (item.meta || {}).i18n
      );
    },
    openMenu(item) {
      buryingPoint(item,'top');
      this.$setStore({name: this.userInfo.userId+'activeIndex',content:item.menuLevel,type:'session'})
      if(item.menuLevel > 10){
        let itemActive,
          childItemActive = 0;
        if (item.path != null || item.path != '' ) {
          itemActive = item;
        } else {
          if (this.menu[childItemActive].length == 0) {
            itemActive = this.menu[childItemActive];
          } else {
            itemActive = this.menu[childItemActive].children[childItemActive];
          }
        }
        this.$router.push({
          path: this.$router.$avueRouter.getPath({
            name: itemActive.label,
            src: itemActive.path,
            i18n: itemActive.meta.i18n
          })
        });
        return false;
      }
      this.getMenus(item);
    },
    /**
     * 获取菜单
     */
    getMenus(item){
      this.singleBody = {
        level: item.menuLevel,
        userId: this.userInfo.userId
      }
      this.reqParams =  {
        singleBody: this.singleBody,
        currentPage: 1, 
        pageSize: this.website.maxPageSize
      }
      this.commonData = {
        commonArea: reqCommonMsg(this.reqParams),
        level: item.menuLevel,
        recordChanged: this.recordChanged || false
      }
      this.$store.dispatch('GetMenu', this.commonData).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true);
        }
        let itemActive,
          childItemActive = 0;
        if (item.path != null || item.path != '' ) {
          itemActive = item;
        } else {
          if (this.menu[childItemActive].length == 0) {
            itemActive = this.menu[childItemActive];
          } else {
            itemActive = this.menu[childItemActive].children[childItemActive];
          }
        }
        this.$router.push({
          path: this.$router.$avueRouter.getPath({
            name: itemActive.label,
            src: itemActive.path,
            i18n: itemActive.meta.i18n
          })
        });
      });
    }
  }
};
</script>